<template>
  <div class="right1">
    <!--准备一个dom容器-->
    <div ref="main" class="pie-wrap" style="width:90%;height:90%"></div>
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.draw();
  },
  //方法集合
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts
      let t = this;
      var myChart = this.$echarts.init(this.$refs.main);
      myChart.setOption({
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          left: "left",
          icon:
            "image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png",
          textStyle: {
            //图例文字的样式
            color: "#ffffff",
            fontSize: 20,
          },
          show: true,
          data: [
            {
              name: "网络流量",
            },
            {
              name: "交易笔数",
            },
          ],
        },
        /*toolbox: {
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            },
            iconStyle:{
              normal:{
                color:'white',//设置颜色
              }
            }
          },*/
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              // x轴的颜色和宽度
              lineStyle: {
                color: "rgba(250,250,250,0.3)",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(250,250,250,0.3)",
                fontSize: 15,
              },
            },
            data: [
              "01月份",
              "02月份",
              "03月份",
              "04月份",
              "05月份",
              "06月份",
              "07月份",
              "08月份",
              "09月份",
              "10月份",
              "11月份",
              "12月份",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",

            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(250,250,250,0.3)",
                fontSize: 15,
              },
            },
            // 刻度
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(250,250,250,0.3)",
              },
            },
            // 控制网格线是否显示
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(250,250,250,0.3)",
              },
            },

            // min: 0,
            // splitNumber: 5,
            // boundaryGap: [0.2, 0.2],
            // data: [0, 50, 100, 150],
          },
        ],
        grid: {
          top: "25%",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        series: [
          {
            name: "网络流量",
            type: "line",
            smooth: true,
            symbolSize: 1, // 拐点图形大小
            areaStyle: {
              normal: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(63,227,236,0.8)",
                  },
                  {
                    offset: 0.4,
                    color: "rgba(63,227,236,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(63,227,236,0.00)",
                  },
                ]),
                // ['rgba(63,227,236,0.3)'],
              },
            },
            itemStyle: {
              color: ["#3FE3EC"],
            },
            data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],
            // icon:"image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png",
          },
          {
            name: "交易笔数",
            type: "line",
            smooth: true,
            symbolSize: 1, // 拐点图形大小
            areaStyle: {
              color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(82,206,86,0.8)",
                },
                {
                  offset: 0.4,
                  color: "rgba(82,206,86,0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(82,206,86,0.00)",
                },
              ]),
              // ['rgba(82,206,86,0.3)'],
            },
            itemStyle: {
              normal: {
                color: ["#52CE56"],
              },
            },
            data: [10, 5, 15, 5, 15, 20, 15, 20, 15, 5, 15, 10],
            // icon:"image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png",
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// .pie-wrap{
//       width:1200px !important;
//       height:300px;
//       bottom: -2.5rem
//   }
</style>
